<template>
  <view class="box-center-content">
    <!-- 福袋头部信息 -->

    <view class="box-information">
      <view class="left-cover-img">
        <image :src="boxInfo.img" class=""> </image>
        <image :src="boxInfo.rule_img" class="level-img"> </image>
      </view>
      <view class="right-information">
        <view class="box-name">
          <text class="">{{ boxInfo.name }}</text>
          <!-- <image src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/lucky-box/like.png" class=""></image> -->
          <uni-icons
            :type="is_sc == 0 ? 'heart' : 'heart-filled'"
            :color="is_sc == 1 ? '#EC5050' : ''"
            size="17"
            @tap.stop="hope(goodsId)"
          ></uni-icons>
        </view>
        <view class="user-information">
          <view class="img-username">
            <image
              :src="
                shopInfo != undefined && shopInfo.shop_img != undefined
                  ? shopInfo.shop_img
                  : ''
              "
              class=""
            >
            </image>
            <text class="">{{
              shopInfo != undefined && shopInfo.shop_name != undefined
                ? shopInfo.shop_name
                : ''
            }}</text>
          </view>
          <view
            class="box-point"
            v-if="boxInfo.is_integral && boxInfo.is_integral == 1"
          >
            <image
              src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/point.png"
              class=""
            ></image>
            <text class="">积分</text>
          </view>
        </view>
        <view class="box-money">
          <view class="">
            <text class="">￥{{ boxInfo.price }}</text>
          </view>
          <view class="money-mum">
            <text class="">余</text>
            <text class="" style="color: #8e6ed4">{{ boxInfo.leftnum }}/</text>
            <text class="">共</text>
            <text class="" style="color: #8e6ed4">{{
              boxInfo.extract_ci
            }}</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 福袋状态	 -->
    <view class="box-mid-prize">
      <view class="left-goods-img">
        <image :src="bigGoods.length > 0 ? bigGoods[0].img : ''"></image>
      </view>
      <view class="right-goods-img">
        <view class="open-goods-time" v-if="dayTime > 0">
          <text class="">福袋开赏倒计时：</text>
          <uni-countdown
            :font-size="11"
            @timeup="cancleShow"
            splitorColor="#7863FF"
            color="#7863FF"
            background-color="#F5F3FD"
            :day="Math.floor(dayTime / (24 * 60 * 60))"
            :hour="Math.floor((dayTime % (60 * 60 * 24)) / (60 * 60))"
            :minute="Math.floor((dayTime % (60 * 60)) / 60)"
            :second="Math.floor(dayTime % 60)"
            :show-colon="false"
          />
        </view>
        <view class="mid-pace">
          <view class="goods-pace">
            <image
              class=""
              src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/box-star.png"
            ></image>
            <text class="" style="color: #808080">福袋奖项进度 </text>
            <text class=""
              >{{ boxInfo.big_leftnum }}/{{ boxInfo.big_sumnum }}</text
            >
            <image
              class=""
              src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/box-star.png"
            ></image>
          </view>
          <view class="right-details" @click="openReward">
            <text class="">出奖明细></text>
          </view>
        </view>
        <view class="other-goods-img">
          <template v-for="(item, index) in bigGoods.slice(1)" :key="index">
            <image :src="item.img" class=""></image>
          </template>
        </view>
      </view>
      <!-- //倒计时 -->
      <view class="countdown" v-if="wait_order && wait_order.id">
        <view class="left-image">
          <image
            src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/countdown.png"
          ></image>
        </view>
        <view class="right-time">
          <view class="top-time">
            <text style="font-size: 26rpx; color: #383838">支付倒计时：</text>
            <!-- <text style="color: #D43030;font-size: 32rpx;font-weight: 600;">03:00</text> -->
            <uni-countdown
              font-size="32rpx"
              @timeup="onCountdownEnd"
              color="#D43030"
              background-color="#fff"
              splitorColor="#D43030"
              :show-day="false"
              :show-hour="false"
              :minute="Math.floor((wait_order.pass_time % (60 * 60)) / 60)"
              :second="Math.floor(wait_order.pass_time % 60)"
              :show-colon="true"
            />
          </view>
          <view class="time-btn">
            <view class="toPay" @click="openGoods">
              <image
                src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/lucky-box/toPay.png"
              ></image>
            </view>
            <view class="cancel" @click="cancelBagOrder">
              <image
                src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/lucky-box/cancel.png"
              ></image>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 福袋列表 -->
    <view class="mid-box-list">
      <view class="all-gift-list">
        <template v-for="(item, index) in goods_info" :key="index">
          <view
            v-if="item.is_lock == 1"
            class="box-gift box-sold"
            @click="chooseBagFun(item)"
          >
            <image
              class=""
              src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/box-gift.png"
            ></image>
            <view class="gift-num">
              <text class="">{{
                (index + 1).toString().padStart(3, '0')
              }}</text>
            </view>
            <view class="sold-img">
              <image
                src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/lucky-box/clock.png"
              ></image>
            </view>
          </view>
          <view
            v-else-if="item.leftover == 1"
            class="box-gift"
            @click="chooseBagFun(item)"
          >
            <image
              class=""
              :src="
                chooseBag.includes(item.id)
                  ? 'https://ojqn.wm2177.com/wechat_imgs/kapai-test/box-select.png'
                  : 'https://ojqn.wm2177.com/wechat_imgs/kapai-test/box-gift.png'
              "
            ></image>
            <view class="gift-num">
              <text class="">
                {{ (index + 1).toString().padStart(3, '0') }}</text
              >
            </view>
          </view>
          <view v-else class="box-gift box-sold">
            <image
              class=""
              src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/box-gift.png"
            ></image>
            <view class="gift-num">
              <text class="">{{
                (index + 1).toString().padStart(3, '0')
              }}</text>
            </view>
            <view class="sold-img">
              <image
                src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/lucky-box/Sold.png"
              ></image>
            </view>
          </view>
        </template>
      </view>
    </view>

    <!-- 支付弹窗 -->
    <uni-popup ref="paypopup" type="bottom">
      <view class="order-pop">
        <view class="popup-close" @click="closeOrder">
          <image
            src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/tianxuan/popup-close.png"
          ></image>
        </view>
        <view class="popup-title">
          <text>确认订单</text>
        </view>
        <view class="order-top">
          <view class="left-img">
            <image :src="boxInfo.img"></image>
          </view>
          <view class="right-tit">
            <view class="title">
              <text>{{ boxInfo.name }}</text>
            </view>
            <view class="tit-mid">
              <text>不支持七天无理由退货·无法回收</text>
            </view>
            <view class="tit-num">
              <text>购买数量</text>
              <text style="color: #7948ea; margin-left: 50rpx"
                >{{ buyCount }}次</text
              >
            </view>
          </view>
        </view>
        <view class="select-coupon" @click="chooseCoupon">
          <view class="coupon-left">
            <text class="">选择优惠券</text>
          </view>
          <view class="coupon-right">
            <text style="margin-right: 15rpx"></text>
            <text>{{ couponname }}></text>
          </view>
        </view>
        <!-- 虚线 -->
        <view class="popup-line"></view>
        <view class="payment-tit">
          <text>支付方式</text>
        </view>
        <view class="payment-list">
          <!-- 微信 -->
          <view class="wechat" @click="radioChange(1)">
            <view class="wechat-left">
              <view class="wechat-img">
                <image
                  src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/tianxuan/pop-wechat.png"
                ></image>
              </view>
              <view class="wechat-tit">
                <text>微信支付</text>
              </view>
            </view>
            <view class="wechat-right">
              <!-- <view class="wechat-money">
								<text >￥90.00</text>
							</view> -->
              <view
                class="select-icon"
                v-if="currentradio === 1"
                @click="radioChange(1)"
              >
                <image
                  src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/tianxuan/select-icon.png"
                ></image>
              </view>
            </view>
          </view>
          <!-- 虚线 -->
          <view class="popup-line"></view>
          <!-- 卡尘 -->
          <view class="wechat" @click="radioChange(3)">
            <view class="wechat-left">
              <view class="wechat-img">
                <image
                  style="width: 64rpx; height: 78rpx"
                  src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/tianxuan/pop-kachen.png"
                ></image>
              </view>
              <view class="wechat-tit">
                <text>卡尘支付</text>
              </view>
            </view>
            <view class="wechat-right">
              <view class="wechat-money">
                <text></text>
              </view>
              <view class="select-icon" v-if="currentradio === 3">
                <image
                  src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/tianxuan/select-icon.png"
                ></image>
              </view>
            </view>
          </view>
          <!-- 虚线 -->
          <view class="popup-line"></view>
          <!-- //支付宝 -->
          <view class="wechat" @click="radioChange(2)">
            <view class="wechat-left">
              <view class="wechat-img">
                <image
                  style="width: 56rpx; height: 56rpx"
                  src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/tianxuan/pop-alipay.png"
                ></image>
              </view>
              <view class="wechat-tit">
                <text>支付宝支付</text>
              </view>
            </view>
            <view class="wechat-right">
              <view class="wechat-money">
                <text></text>
              </view>
              <view class="select-icon" v-if="currentradio === 2">
                <image
                  src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/tianxuan/select-icon.png"
                ></image>
              </view>
            </view>
          </view>
          <!-- 支付 -->
          <view class="underage">
            <text>未成年人禁止购买</text>
          </view>
          <view class="pay-button" @click="payMoney">
            <image
              src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/tianxuan/pay-button.png"
            ></image>
          </view>

          <view class="pay-agree">
            <!-- <radio style="transform: scale(0.8)" value="r1" :checked="agree" @click="changeAgree"/>本人已满18岁，已阅读并同意<text style="color: #7948EA;">《天选之人使用协议》</text> -->
            <view class="raido">
              <image
                src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/radio.png"
              ></image>
            </view>
            <view class="">
              本人已满18岁，已阅读并同意<text style="color: #7948ea"
                >《天选之人使用协议》</text
              >
            </view>
          </view>
        </view>
      </view>
    </uni-popup>

    <!-- 福袋奖项进度弹窗 -->
    <uni-popup ref="rewardpopup" type="center">
      <view class="paceNum-pop">
        <view class="popup-close" @click="clossReward">
          <image
            src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/tianxuan/popup-close.png"
          ></image>
        </view>
        <!-- //标题 -->
        <view class="pace-title">
          <image
            src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/lucky-box/fudai-star.png"
          ></image>
          <text>福袋奖项进度 </text>
          <text style="color: #986efa">{{ boxInfo.big_leftnum }}</text>
          <text style="color: #986efa">/</text>
          <text style="color: #986efa; margin-right: 20rpx">{{
            boxInfo.big_sumnum
          }}</text>
          <image
            src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/lucky-box/fudai-star.png"
          ></image>
        </view>
        <!-- //产品列表 -->
        <scroll-view
          class=""
          :scroll-y="true"
          style="overflow: scroll-y; height: 840rpx"
        >
          <view class="pace-list">
            <template v-for="(item, index) in bigGoods" :key="index">
              <view
                @click="openDetail(item)"
                v-if="item.leftover == 1"
                class="pace-image"
              >
                <image :src="item.img"></image>
              </view>

              <view v-else class="pace-image gray" @click="openDetail(item)">
                <image :src="item.img"></image>
                <view class="sold">
                  <image
                    src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/lucky-box/Sold.png"
                  ></image>
                </view>
                <view
                  class="chiji"
                  v-if="item.stage_end != undefined && item.stage_end > 0"
                >
                  <image
                    src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/lucky-box/chiji.png"
                  ></image>
                </view>
              </view>
            </template>
          </view>
          <!-- <view v-for="(item,index) in 100" :key="index" style="height: 10px;">
							122
						</view> -->
        </scroll-view>
      </view>
    </uni-popup>

    <!-- 赏品详情弹窗 -->
    <uni-popup ref="goodsPopup" type="center">
      <view class="goods-pop">
        <view class="popup-star">
          <image
            src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/tianxuan/popup-star.png"
          ></image>
        </view>
        <view class="popup-close" @click="closePopup">
          <image
            src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/tianxuan/popup-close.png"
          ></image>
        </view>
        <view class="popup-title">
          <text>详情</text>
        </view>
        <view class="popup-img">
          <image :src="goodsDetail.img"></image>
        </view>
        <view class="goods-detail">
          <view class="goods-name">
            <text>{{ goodsDetail.goods_name }}</text>
          </view>
          <view class="goods-specs">
            <view class="goods-odds">
              <text class="">概率:</text>
              <text class="">{{
                goodsDetail.probability
                  ? Number(goodsDetail.probability).toFixed(2) + '%'
                  : ''
              }}</text>
            </view>
            <view class="specs">
              <text class="">参考价:</text>
              <text class="">{{ goodsDetail.price }}</text>
            </view>
            <view class="state">
              <text class="">状态:</text>
              <text class="">{{
                goodsDetail.goods_type == 1 ? '预售' : '现货'
              }}</text>
            </view>
          </view>
          <view
            v-if="
              goodsDetail.stage_end != undefined && goodsDetail.stage_end > 0
            "
            class=""
            style="
              color: #383838;
              font-size: 20rpx;
              text-align: center;
              margin-top: 10rpx;
            "
            >吃鸡赏规则：{{ goodsDetail.stage_start }}-{{
              goodsDetail.stage_end
            }}发随机送出</view
          >
        </view>
      </view>
    </uni-popup>

    <!-- 购买记录弹窗 -->
    <uni-popup ref="buyLogsPopup" type="center">
      <view class="logs">
        <view class="popup-close" @click="closeLogs">
          <image
            src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/tianxuan/popup-close.png"
          ></image>
        </view>
        <!-- //标题 -->
        <view class="logs-title">
          <text>购买记录</text>
        </view>
        <view class="logs-list">
          <scroll-view
            scroll-y="true"
            style="height: 100vh"
            @scrolltolower="loadMoreLog"
          >
            <view
              class="all-logs"
              v-for="(item, index) in bugLogList"
              :key="index"
            >
              <view class="logs-left">
                <view class="logs-img">
                  <image :src="item.img"></image>
                </view>
                <text class="name">{{ item.goods_name }}</text>
              </view>
              <view class="logs-right">
                <text class="logs-num">{{ item.index }}</text>
                <view class="user-img">
                  <image class="user-imgs" :src="item.himg"></image>
                  <text>{{ item.nickname }}</text>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </uni-popup>
    <!-- 底部固定 -->
    <view class="bottom-content">
      <view class="select-num">
        <text class="">已选</text>
        <text class="" style="color: #7948ea">{{ buyCount }}</text>
        <text class="">个</text>
        <text class="">共</text>
        <text class="" style="color: #7948ea">{{ paymoney }}</text>
        <text class="">元</text>
      </view>
      <view class="right-buy">
        <view class="buy-border" @click="buyLogsPop">
          <text class="">购买记录</text>
        </view>
        <view class="buy-btn" @click="payPOP">
          <image
            src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/buy.png"
          ></image>
        </view>
      </view>
    </view>

    <uni-popup ref="getReward" type="center">
      <view class="reward">
        <!-- //标题 -->
        <view class="reward-title">
          <image
            src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/lucky-box/reward.png"
          ></image>
        </view>
        <!-- //内容 -->
        <scroll-view class=" " scroll-y="true" style="height: 850rpx">
          <view class="goods-list">
            <template v-for="(item, index) in box_goods" :key="index">
              <view class="goods-img">
                <image :src="item.img"></image>
                <view class="goods-leavel">
                  <image :src="item.rule_img"></image>
                </view>
              </view>
            </template>
          </view>
        </scroll-view>
        <!-- //按钮 -->
        <view class="get-btn" @click="closeRewardBtn">
          <image
            src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/lucky-box/get-goods.png"
          ></image>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<!-- <script > -->
<script setup>
  import { onMounted, onUnmounted, ref } from 'vue'
  import { http } from '@/utils/http.js'
  import {
    onLoad,
    onShow,
    onShareAppMessage,
    onReachBottom,
  } from '@dcloudio/uni-app'
  import { useUsercodeStore } from '@/store/usercode.js'
  const userCodeStore = useUsercodeStore()

  function formatCountdown(time) {
    const minutes = Math.floor(time / 1000 / 60) // 计算分钟
    const seconds = Math.floor((time / 1000) % 60) // 计算秒数

    // 将分钟和秒数格式化为 MM:ss
    return `${this.padZero(minutes)}:${this.padZero(seconds)}`
  }

  function onCountdownEnd() {
    getDetail()
  }

  const boxInfo = ref({})
  const goodsId = ref(null)
  const bigGoods = ref([])
  const goods_info = ref([])
  const shopInfo = ref({})
  const is_sc = ref(0)
  const wait_order = ref()
  const dayTime = ref(0)

  async function getDetail() {
    const res = await http.request({
      url: '/api/box/boxDetails',
      method: 'POST',
      data: { id: goodsId.value },
    })
    console.log(res)
    if (res.st == 1) {
      shopInfo.value = res.data.shop_info
      boxInfo.value = res.data.box
      bigGoods.value = res.data.bigGoods
      goods_info.value = res.data.goods_info
      wait_order.value = res.data.box.wait_order
      is_sc.value = res.data.is_sc

      let day_num = res.data.box.day_num
      if (day_num > 0) {
        // 给定的时间戳
        const show_time = res.data.box.show_time // 这个是以秒为单位

        // 将天数转换为毫秒
        const dayInMilliseconds = day_num * 24 * 60 * 60 * 1000

        // 计算新的时间戳
        const targetTime = show_time * 1000 + dayInMilliseconds // 转换为毫秒
        console.log('下架时间', targetTime)
        // 获取当前时间戳
        const currentTime = Date.now() // 当前时间的毫秒数
        console.log('下架时间', currentTime)
        // 计算时间差
        dayTime.value = (targetTime - currentTime) / 1000
        console.log('下架时间', dayTime.value)
      }
    }
  }

  async function hope(id) {
    if (
      userCodeStore.usercode.token == '' ||
      userCodeStore.usercode.userId == ''
    ) {
      uni.utils.toast('为了让您有更好的体验，请先登录')
      setTimeout(() => {
        uni.navigateTo({
          url: `/pages/login/login`,
        })
      }, 2000)
      return
    }

    const res = await http.request({
      url: '/api/goods/scPost',
      method: 'POST',
      data: {
        id: id,
        type: '2',
      },
    })
    console.log(res)
    if (res.st == 1) {
      is_sc.value = !is_sc.value
      uni.showToast({
        title: '操作成功',
        duration: 2000,
      })
    } else {
      uni.showToast({
        title: '操作失败',
        icon: 'error',
        duration: 2000,
      })
    }
  }

  const remainingTime = ref('')

  function updateCountdown() {
    const endTime =
      new Date(boxInfo.value.launch_time).getTime() +
      boxInfo.value.days * 24 * 60 * 60 * 1000
    const now = new Date().getTime()
    const distance = endTime - now

    if (distance < 0) {
      remainingTime.value = '已结束'
      clearInterval(timer)
      return
    }

    const days = Math.floor(distance / (1000 * 60 * 60 * 24))
    const hours = Math.floor(
      (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
    )
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))
    const seconds = Math.floor((distance % (1000 * 60)) / 1000)

    remainingTime.value = `${days} 天 ${hours} 小时 ${minutes} 分 ${seconds} 秒`
  }

  let timer = setInterval(updateCountdown, 1000)

  onMounted(() => {
    updateCountdown() // Initialize countdown on mount
  })

  onUnmounted(() => {
    clearInterval(timer)
  })

  const rewardpopup = ref()
  const getReward = ref()
  // const closeRewardBtn = ref()

  // 出奖记录
  function openReward() {
    rewardpopup.value.open('center')
  }

  function clossReward() {
    rewardpopup.value.close('bottom')
  }

  function openGoods() {
    getReward.value.open('top')
  }

  function closeRewardBtn() {
    getReward.value.close('top')
    chooseBag.value = []
    paymoney.value = 0
    buyCount.value = 0
    getDetail()
  }

  const goodsPopup = ref()
  const goodsDetail = ref({})
  function openDetail(item) {
    console.log(item)
    goodsDetail.value = item
    goodsPopup.value.open('center')
  }

  function closePopup() {
    goodsPopup.value.close('center')
  }

  const bugLogPage = ref(1)
  const bugLogList = ref([])
  const buyLogsPopup = ref()
  async function getBugLogs() {
    const res = await http.request({
      url: '/api/box/winLog_bag',
      method: 'POST',
      data: {
        page: bugLogPage.value,
        limit: 10,
        id: goodsId.value,
      },
    })
    bugLogList.value = [...bugLogList.value, ...res.data]
  }

  function loadMoreLog() {
    ++bugLogPage.value
    getBugLogs()
  }

  function buyLogsPop() {
    bugLogPage.value = 1
    bugLogList.value = []
    getBugLogs()
    buyLogsPopup.value.open('center')
  }
  function closeLogs() {
    bugLogPage.value = 1
    bugLogList.value = []
    buyLogsPopup.value.close('center')
  }

  // 下架
  function cancleShow() {
    dayTime.value = 0
  }

  onLoad((options) => {
    goodsId.value = options.id
    getDetail()
  })

  onShow(() => {
    uni.$once('thecoupon', (data) => {
      console.log(data)
      realmoney.value = paymoney.value
      if (data.coupon) {
        couponId.value = data.coupon.id
        couponname.value = data.coupon.title
        // 满减
        if (data.coupon.type == 1) {
          realmoney.value = (paymoney.value - data.coupon.money).toFixed(2)
        } else if (data.coupon.type == 2) {
          realmoney.value = (paymoney.value - data.coupon.money).toFixed(2)
        } else if (data.coupon.type == 3) {
          realmoney.value = (paymoney.value * data.coupon.discount).toFixed(2)
        }
      }
    })
  })

  const chooseBag = ref([])
  function chooseBagFun(item) {
    if (chooseBag.value.includes(item.id)) {
      chooseBag.value = chooseBag.value.filter((id) => id !== item.id)
    } else {
      chooseBag.value.push(item.id)
    }
    buyCount.value = chooseBag.value.length
    paymoney.value = (boxInfo.value.price * buyCount.value).toFixed(2)
  }

  // 支付
  const paypopup = ref()
  // 没有优惠券的价格
  const paymoney = ref(0)
  const buyCount = ref(0)
  //有优惠券的jiage
  const realmoney = ref()
  const agree = ref(true)
  async function payPOP() {
    if (buyCount.value < 1) {
      uni.utils.toast('请先选择福袋')
      return
    }

    if (
      userCodeStore.usercode.token == '' ||
      userCodeStore.usercode.userId == ''
    ) {
      uni.utils.toast('为了让您有更好的体验，请先登录')
      setTimeout(() => {
        uni.navigateTo({
          url: `/pages/login/login`,
        })
      }, 2000)
      return
    }
    // if (
    // 	userCodeStore.usercode.isAddress == 0 &&
    // 	userCodeStore.usercode.token != ''
    // ) {
    // 	uni.utils.toast('为了让您有更好的体验，请先完善物流信息')
    // 	setTimeout(() => {
    // 		uni.navigateTo({
    // 			url: `/minePage/editaddress/index`,
    // 		})
    // 	}, 2000)
    // 	return
    // }
    await getUserMoney()
    paypopup.value.open('bottom')
    // 每次点击重新选择优惠券
    realmoney.value = paymoney.value
    couponId.value = 0
    couponname.value = ''
  }

  function closeOrder() {
    paypopup.value.close('bottom')
  }

  async function cancelBagOrder() {
    if (
      userCodeStore.usercode.token == '' ||
      userCodeStore.usercode.userId == ''
    ) {
      uni.utils.toast('为了让您有更好的体验，请先登录')
      setTimeout(() => {
        uni.navigateTo({
          url: `/pages/login/login`,
        })
      }, 2000)
      return
    }

    const res = await http.request({
      url: '/api/boxorder/cancelBagOrder',
      method: 'POST',
      data: {
        id: wait_order.value.id,
      },
    })
    if (res.st == 1) {
      uni.utils.toast('取消成功')
      getDetail()
    } else {
      uni.utils.toast(res.msg)
    }
  }

  // 用户信息卡尘(暂时)
  const preferential = ref()
  const balance = ref(0)
  async function getUserMoney() {
    const res = await http.request({
      url: '/api/user/userMsg',
      method: 'POST',
      data: {},
    })
    console.log('user')
    console.log(res)
    balance.value = res.data.data.balance
    preferential.value = res.data.preferential
  }

  function changeAgree() {
    agree.value = !agree.value
  }
  //支付radio , 默认余额支付
  const currentradio = ref(3)
  function radioChange(evt) {
    currentradio.value = evt
  }
  // 天选抽卡
  // 卡尘支付
  const box_goods = ref([])
  async function payMoney() {
    console.log(agree.value)
    if (agree.value == false) {
      uni.utils.toast('请阅读并同意使用协议')
      return
    }
    const res = await http.request({
      url: '/api/boxorder/createBagOrder',
      method: 'POST',
      data: {
        id: goodsId.value,
        sorce: 1,
        pay_type: currentradio.value,
        coupon_id: couponId.value,
        idArr: chooseBag.value,
        money: paymoney.value,
      },
    })
    console.log(res)
    if (res.st == 1) {
      paypopup.value.close()
      box_goods.value = res.data.box_goods
      openGoods()
      // uni.navigateTo({
      // 	url: `/drawPage/txDrawCards/index?thecard=${encodeURIComponent(
      // 		JSON.stringify(haveDraw.value)
      // 	)}&num=${buyCount.value}&id=${blindboxId.value}&pay_type=${
      // 		currentradio.value
      // 	}&case_id=${caseId.value}&money=${paymoney.value}&img=${
      // 		blindboxDetail.value.box.img
      // 	}&name=${blindboxDetail.value.box.name}&couponid=${
      // 		couponId.value
      // 	}`,
      // })
    } else {
      uni.utils.toast(res.msg)
      couponId.value = 0
      couponname.value = ''
    }
  }

  // 优惠券
  const couponId = ref(0)
  const couponname = ref('')
  const couponType = ref(-1)

  // 选择优惠券
  function chooseCoupon() {
    uni.navigateTo({
      url: `/drawPage/choosecoupon/index?money=${paymoney.value}&id=${goodsId.value}&couponid=${couponId.value}`,
    })
  }
</script>

<style lang="scss" scoped>
  .box-center-content {
    background-color: #e9eaf2;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    .box-information {
      width: 730rpx;
      height: 260rpx;
      margin: 10rpx auto;
      background: #fff;
      border-radius: 10rpx;
      display: flex;
      justify-content: space-between;
      .left-cover-img {
        width: 60%;
        display: flex;
        height: 100%;
        justify-content: center;
        position: relative;
        border-radius: 10rpx;
        image {
          width: 374rpx;
          height: 188rpx;
          margin: auto;
        }
        .level-img {
          width: 97rpx;
          height: 48rpx;
          position: absolute;
          left: 34rpx;
          top: 28rpx;
          image {
            width: 100%;
            height: 48rpx;
          }
        }
      }
      .right-information {
        display: flex;
        flex-direction: column;
        width: 40%;
        justify-content: space-evenly;
        .box-name {
          font-size: 36rpx;
          width: 90%;
          color: #383838;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          image {
            width: 30rpx;
            height: 30rpx;
            margin-left: 30rpx;
          }
        }
        .user-information {
          display: flex;
          .img-username {
            font-size: 18rpx;
            color: #383838;
            align-items: center;
            display: flex;
            image {
              width: 30rpx;
              height: 30rpx;
              margin-right: 10rpx;
            }
          }
          .box-point {
            image {
              width: 20rpx;
              height: 20rpx;
              align-items: center;
            }
            width: 76rpx;
            height: 30rpx;
            font-size: 18rpx;
            line-height: 30rpx;
            text-align: center;
            background-color: #ff8d1a;
            border-radius: 14rpx;
            color: #fff;
            font-weight: 600;
            align-items: center;
            display: flex;
            justify-content: center;
            margin: auto;
          }
        }
        .box-money {
          font-size: 28rpx;
          color: 000;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .money-mum {
            margin-left: 20rpx;
            display: flex;
            font-size: 22rpx;
            color: #000;
            padding-right: 30rpx;
          }
        }
      }
    }
    .box-mid-prize {
      width: 730rpx;
      height: 280rpx;
      background-color: #fff;
      border-radius: 14rpx;
      margin: 10rpx auto;
      display: flex;
      position: relative;
      .left-goods-img {
        width: 30%;
        height: 280rpx;
        text-align: center;
        image {
          width: 180rpx;
          height: 250rpx;
          margin: 15rpx auto;
        }
      }
      .right-goods-img {
        width: 70%;
        // background: #354445;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .open-goods-time {
          border: 2rpx solid #c1a6ff;
          border-radius: 14rpx;
          width: 484rpx;
          height: 46rpx;
          color: #986efa;
          font-size: 24rpx;
          // margin: 15rpx auto;
          line-height: 46rpx;
          text-align: center;
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          padding-left: 20rpx;
        }
        .mid-pace {
          display: flex;
          color: #956fed;
          justify-content: space-between;
          // margin: 15rpx;
          .goods-pace {
            display: flex;
            font-size: 24rpx;
            text-align: center;
            image {
              width: 38rpx;
              height: 38rpx;
              text-align: center;
            }
          }
          .right-details {
            font-size: 22rpx;
            margin-right: 20rpx;
          }
        }
        .other-goods-img {
          // display: flex;
          width: 100%;
          overflow: scroll;
          // overflow-x: hidden;
          // height: 145rpx;
          white-space: nowrap;
          image {
            width: 103rpx;
            height: 143rpx;
            margin-right: 30rpx;
          }
        }
      }
      .countdown {
        width: 510rpx;
        height: 196rpx;
        background-color: #fff;
        border-radius: 14rpx;
        border: 4rpx solid #bfa4fc;
        display: flex;
        position: absolute;
        top: 66rpx;
        right: 8rpx;
        display: flex;
        justify-content: space-evenly;
        .left-image {
          width: 97rpx;
          height: 120rpx;
          margin: 38rpx;
          margin-right: 80rpx;
          image {
            width: 97rpx;
            height: 120rpx;
          }
        }
        .right-time {
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          margin-right: 30rpx;
          .top-time {
            display: flex;
            margin-top: 20rpx;
          }
          .time-btn {
            display: flex;
            .toPay {
              width: 112rpx;
              height: 60rpx;
              image {
                width: 112rpx;
                height: 60rpx;
              }
            }
            .cancel {
              width: 112rpx;
              height: 60rpx;
              margin: 10rpx auto;
              margin-left: 20rpx;
              image {
                width: 98rpx;
                height: 48rpx;
                margin: 5rpx auto;
              }
            }
          }
        }
      }
    }
    .mid-box-list {
      // width: 730rpx;
      height: 750rpx;
      display: flex;
      margin: 0rpx auto;
      background-color: #fff;
      border-radius: 14rpx;
      overflow: scroll;
      .all-gift-list {
        display: flex;
        flex-wrap: wrap;
        // width: 700rpx;
        height: min-content;
        margin: 20rpx;
      }
      .box-gift {
        position: relative;
        margin: 5rpx;
        // width: 100%;
        height: 130rpx;
        padding-bottom: 19rpx;
        image {
          width: 110rpx;
          height: 124rpx;
        }
        .gift-num {
          position: absolute;
          width: 76rpx;
          height: 30rpx;
          border-radius: 3rpx;
          background: #ffedb3;
          line-height: 30rpx;
          text-align: center;
          font-size: 22rpx;
          top: 0rpx;
          left: 19rpx;
        }
      }
      .box-sold {
        filter: grayscale(1);
        position: relative;
        .sold-img {
          position: absolute;
          top: 40rpx;
          left: 20rpx;
          image {
            width: 74rpx;
            height: 52rpx;
          }
        }
      }
    }
    .goods-pop {
      width: 538rpx;
      height: 770rpx;
      background-color: #fff;
      border-radius: 26rpx;
      box-shadow: 0px 4rpx 8rpx rgba(115, 53, 53, 0.25);
      position: relative;
      border: 6rpx solid #740b00;
    }
    .popup-star {
      position: absolute;
      top: -45rpx;
      left: -4rpx;
      image {
        width: 90rpx;
        height: 88rpx;
      }
    }
    .popup-close {
      position: absolute;
      top: 16rpx;
      right: 16rpx;
      image {
        width: 46rpx;
        height: 46rpx;
      }
    }

    .popup-title {
      font-size: 36rpx;
      color: #000;
      margin-top: 15rpx;
      text-align: center;
    }
    .popup-img {
      width: 368rpx;
      height: 502rpx;
      margin: 42rpx auto;
      image {
        width: 368rpx;
        height: 502rpx;
        border-radius: 14rpx;
      }
    }
    .goods-detail {
      width: 440rpx;
      height: 78rpx;
      border: 4rpx solid #740b00;
      border-radius: 10rpx;
      margin: 40rpx auto;
      .goods-name {
        font-size: 28rpx;
        color: #740b00;
        text-align: center;
      }
      .goods-specs {
        display: flex;
        font-size: 20rpx;
        font-weight: 500;
        color: #fff;
        background-color: #b8a0e8;
        height: 35rpx;
        line-height: 35rpx;
        text-align: center;
        justify-content: space-evenly;
        margin-top: 6rpx;
        border-radius: 0rpx 0rpx 7rpx 7rpx;
      }
    }
    .order-pop {
      width: 730rpx;
      height: 900rpx;
      background-color: #fff;
      border-radius: 26rpx 26rpx 0rpx 0rpx;
      box-shadow: 0px 4rpx 8rpx rgba(115, 53, 53, 0.25);
      position: relative;
      border: 6rpx solid #740b00;
      margin: auto;
      .popup-close {
        position: absolute;
        top: 16rpx;
        right: 16rpx;
        image {
          width: 46rpx;
          height: 46rpx;
        }
      }
      .popup-title {
        font-size: 36rpx;
        color: #000;
        margin-top: 15rpx;
        text-align: center;
      }
      .order-top {
        display: flex;
        justify-content: space-around;
        margin: 30rpx auto;
        .left-img {
          width: 326rpx;
          height: 142rpx;
          image {
            width: 326rpx;
            height: 142rpx;
            border-radius: 10rpx;
          }
        }
        .right-tit {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: start;
          .title {
            font-size: 28rpx;
            color: #000;
            font-weight: 600;
          }
          .tit-mid {
            font-size: 20rpx;
            color: #808080;
          }
          .tit-num {
            font-size: 24rpx;
            font-weight: 600;
            display: flex;
            // justify-content: space-evenly;
          }
        }
      }
      .select-coupon {
        display: flex;
        justify-content: space-between;
        margin: 20rpx auto;
        width: 91%;
        font-weight: 600;
        .coupon-left {
          font-size: 24rpx;
          color: #000;
        }
        .coupon-right {
          font-size: 20rpx;
          color: #956fed;
          display: flex;
        }
      }
      .popup-line {
        width: 91%;
        margin: 30rpx auto;
        opacity: 0.5;
        border: 2rpx dashed #a6a6a6;
      }
      .payment-tit {
        font-size: 24rpx;
        color: #000;
        margin: 32rpx;
        font-weight: 600;
      }
      .payment-list {
        display: flex;
        flex-direction: column;
        .wechat {
          display: flex;
          justify-content: space-between;
          // margin-bottom: 35rpx;
          .wechat-left {
            display: flex;
            margin-left: 27rpx;
            .wechat-img {
              width: 64rpx;
              height: 52rpx;
              // margin-left: 30rpx;
              image {
                width: 64rpx;
                height: 52rpx;
              }
            }
            .wechat-tit {
              font-size: 26rpx;
              color: #383838;
              margin: auto;
              margin-left: 30rpx;
            }
          }
          .wechat-right {
            display: flex;
            .wechat-money {
              font-size: 24rpx;
              color: #916ae6;
              margin: auto;
              margin-right: 20rpx;
            }
            .select-icon {
              margin-right: 30rpx;
              width: 50rpx;
              height: 50rpx;
              image {
                width: 50rpx;
                height: 50rpx;
              }
            }
          }
        }
        .underage {
          font-size: 18rpx;
          color: #916ae6;
          margin: 10rpx auto;
        }
        .pay-button {
          width: 530rpx;
          height: 94rpx;
          margin: 10rpx auto;
          image {
            width: 530rpx;
            height: 94rpx;
          }
        }
        .pay-agree {
          width: 100%;
          // margin-top: 29rpx;
          font-size: 20rpx;
          color: #3d3d3d;
          text-align: center;
          display: flex;
          justify-content: center;
          .raido {
            image {
              width: 27rpx;
              height: 27rpx;
            }
          }
        }
      }
    }

    .paceNum-pop {
      width: 710rpx;
      height: 978rpx;
      background-color: #fff;
      border-radius: 26rpx;
      box-shadow: 0px 4rpx 8rpx rgba(115, 53, 53, 0.25);
      position: relative;
      border: 6rpx solid #740b00;
      font-size: 26rpx;
      color: #808080;
      .popup-close {
        position: absolute;
        top: 16rpx;
        right: 16rpx;
        image {
          width: 46rpx;
          height: 46rpx;
        }
      }
      .pace-title {
        margin: 30rpx auto;
        display: flex;
        justify-content: center;
        font-weight: 600;
        image {
          width: 35rpx;
          height: 34rpx;
          margin-right: 20rpx;
        }
      }
      .pace-list {
        margin: 30rpx auto;
        display: flex;
        overflow: scroll;
        flex-wrap: wrap;
        // width: 96%;
        height: 820rpx;
        justify-content: start;
        // height: 840rpx;
        .pace-image {
          width: 136rpx;
          height: 190rpx;
          margin: 19rpx;
          image {
            width: 136rpx;
            height: 190rpx;
            text-align: center;
          }
        }
        .gray {
          filter: grayscale(1); //图片置灰
          position: relative;
          .sold {
            position: absolute;
            top: 53rpx;
            left: 19rpx;
            image {
              width: 104rpx;
              height: 74rpx;
            }
          }
          .chiji {
            position: absolute;
            top: 53rpx;
            left: 19rpx;
            image {
              width: 70rpx;
              height: 70rpx;
            }
          }
        }
      }
    }
    .logs {
      width: 710rpx;
      height: 978rpx;
      background-color: #e8e2f5;
      border-radius: 26rpx;
      box-shadow: 0px 4rpx 8rpx rgba(115, 53, 53, 0.25);
      position: relative;
      border: 6rpx solid #740b00;
      font-size: 26rpx;
      color: #808080;
      .logs-title {
        margin: 30rpx auto;
        text-align: center;
        color: #8453ed;
        font-size: 32rpx;
        font-weight: 600;
      }
      .logs-list {
        margin: 20rpx auto;
        height: 850rpx;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        .all-logs {
          background-color: #fff;
          width: 95%;
          height: 152rpx;
          border-radius: 14rpx;

          margin: 10rpx auto;
          display: flex;
          justify-content: space-between;
          .logs-left {
            display: flex;
            text-align: center;
            font-size: 30rpx;
            color: #740b00;
            margin: 15rpx;
            .logs-img {
              image {
                width: 88rpx;
                height: 124rpx;
              }
            }
            .name {
              margin: auto;
              margin-left: 30rpx;
              overflow: hidden;
              width: 280rpx;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
          .logs-right {
            display: flex;
            color: #8f66ed;
            font-size: 44rpx;
            font-weight: 600;
            margin-right: 30rpx;
            .logs-num {
              margin: auto;
              margin-right: 30rpx;
            }
            .user-img {
              display: flex;
              flex-direction: column;
              color: #000;
              text-align: center;
              font-size: 20rpx;

              margin: auto;

              .user-imgs {
              }
              image {
                width: 90rpx;
                height: 90rpx;
                border-radius: 60rpx;
              }
            }
          }
        }
      }
    }
    .bottom-content {
      width: 100%;
      height: 124rpx;
      background: #fff;
      position: fixed;
      bottom: 0;
      display: flex;
      justify-content: space-evenly;
      .select-num {
        font-size: 32rpx;
        color: #000;
        margin: 33rpx auto;
        width: 45%;
      }
      .right-buy {
        display: flex;
        margin: 10rpx;
        .buy-border {
          border: 2rpx solid #c1a6ff;
          border-radius: 14rpx;
          width: 110rpx;
          height: 36rpx;
          line-height: 36rpx;
          text-align: center;
          font-size: 22rpx;
          color: #956fed;
          margin: 26rpx auto;
        }
        .buy-btn {
          image {
            width: 250rpx;
            height: 88rpx;
          }
        }
      }
    }
    .reward {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 100%;
      height: 100vh;
      margin: auto;
      // background: rgba(0, 0, 0, 0.5);
      .reward-title {
        width: 100%;
        height: 160rpx;
        display: flex;
        justify-content: center;
        image {
          width: 592rpx;
          height: 160rpx;
        }
      }
      .goods-list {
        width: 85%;
        // height: 880rpx;
        // background-color: #fff;
        margin: 60rpx auto;
        display: flex;
        flex-wrap: wrap;
        overflow: scroll;
        .goods-img {
          width: 164rpx;
          height: 234rpx;
          margin: 24rpx;
          position: relative;
          image {
            width: 164rpx;
            height: 234rpx;
            border-radius: 10rpx;
          }
          .goods-leavel {
            position: absolute;
            top: -6rpx;
            left: 0rpx;
            z-index: 99;
            image {
              width: 74rpx;
              height: 50rpx;
            }
          }
        }
      }
      .get-btn {
        width: 460rpx;
        height: 88rpx;
        display: flex;
        justify-content: center;
        margin: 20rpx auto;
        image {
          width: 460rpx;
          height: 88rpx;
        }
      }
    }
  }
</style>
